<template>
  <div class="productsDetail">
    <span class="productTitle">
      {{ initialData.productTitle }}
    </span>

    <el-carousel height="150px">
      <el-carousel-item v-for="(image,item) in initialData.icon" :key="item">
        <el-image :src="image" fit="contain" style="width: 100%; height: 100%;" />
      </el-carousel-item>
    </el-carousel>
  
    <el-form label-width="auto">
      <el-form-item label="品牌 :">
        <p>{{ initialData.brand }}</p>
      </el-form-item>
      <el-form-item label="上市时节 :">
        <p>{{ initialData.marketSeason }}</p>
      </el-form-item>
      <el-form-item label="运动鞋科技 :">
        <p>{{ initialData.sst }}</p>
      </el-form-item>
      <el-form-item label="鞋底材质 :">
        <p>{{ initialData.soleMaterial }}</p>
      </el-form-item>
      <el-form-item label="功能特性 :">
        <p>{{ initialData.functionality }}</p>
      </el-form-item>
      <el-form-item label="鞋帮高度 :">
        <p>{{ initialData.upperHeight }}</p>
      </el-form-item>
      <el-form-item label="适用人群 :">
        <p>{{ initialData.applicableCrowd }}</p>
      </el-form-item>
      <el-form-item label="鞋面材质 :">
        <p>{{ initialData.upperMaterial }}</p>
      </el-form-item>
      <el-form-item label="运动系列 :">
        <p>{{ initialData.sportsSeries }}</p>
      </el-form-item>
      <el-form-item label="适用场地 :">
        <p>{{ initialData.applicableVenues }}</p>
      </el-form-item>
      <el-form-item label="制作工艺 :">
        <p>{{ initialData.craftsmanship }}</p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from "vue";

const props = defineProps({
  initialData: {
    type: Object,
    required: true
  }
})
console.log(props.initialData);
</script>

<style lang="less" scoped>
.productsDetail {
  margin: 5px;
  text-align: center;

  :deep(.el-form-item) {
    margin: 0;
  }
  :deep(.el-carousel__container) {
    margin: 10px 0;
  }
  :deep(.el-carousel__button){
    width: 10px;
  }
}
</style>
